<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站数据</title>
    {% include "component/static_resource_css.html" %}
    <style>
        body {
            background-image: none;
        }
        .my_wc {
            background-image: url("static/img/WC_without_mask.png");
            height: 450px;
            margin-bottom: 0px;
            mask: linear-gradient(0deg, transparent, #fff);
        }
    </style>
</head>
<body>

<div class="nk-container">
    {% include "component/header.html" %}

    <div class="main">
        <div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
            <div style="padding-bottom: 30px"></div>
            <div class="my_wc"></div>
            <div id="ec-container-2" style="height: 400px; width: 100%"></div>
            <div id="ec-container" style="height: 600px; width: 100%"></div>
        </div>
    </div>

    {% include "component/footer.html" %}
</div>

{% include "component/static_resource_js.html" %}
<script>
    $(document).ready(function () {
        {# js开始 #}
        var dom = document.getElementById('ec-container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};
        var option;
        const recent_30_post = {{ recent_30_post | tojson | safe }}
        const recent_30_user = {{ recent_30_user | tojson | safe }}
        const r30post_dateList = recent_30_post.map(function (item) {
            return item[0];
        });
        const r30post_valueList = recent_30_post.map(function (item) {
            return item[1];
        });
        const r30user_dateList = recent_30_user.map(function (item) {
            return item[0];
        });
        const r30user_valueList = recent_30_user.map(function (item) {
            return item[1];
        });
        option = {
            // Make gradient line here
            visualMap: [
                {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    dimension: 1,
                    min: 0,
                    max: r30post_dateList.length - 1
                },
                {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 1,
                    dimension: 1,
                    min: 0,
                    max: r30user_dateList.length - 1
                }
            ],
            title: [
                {
                    left: 'center',
                    text: '近30日发帖趋势'
                },
                {
                    top: '50%',
                    left: 'center',
                    text: '近30日用户注册趋势'
                }
            ],
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    data: r30post_dateList,
                    gridIndex: 0
                },
                {
                    data: r30user_dateList,
                    gridIndex: 1
                }
            ],
            yAxis: [
                {
                    gridIndex: 0
                },
                {
                    gridIndex: 1
                }
            ],
            grid: [
                {
                    bottom: '60%'
                },
                {
                    top: '60%'
                }
            ],
            series: [
                {
                    type: 'line',
                    showSymbol: false,
                    data: r30post_valueList,
                    xAxisIndex: 0,
                    yAxisIndex: 0
                },
                {
                    type: 'line',
                    showSymbol: false,
                    data: r30user_valueList,
                    xAxisIndex: 1,
                    yAxisIndex: 1
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);
        {# js结束 #}

        {# 热词图 #}
        var dom = document.getElementById('ec-container-2');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};
        var option;
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '10%',
                left: 'center',
                // doesn't perfectly work with our tricks, disable it
                selectedMode: false
            },
            title: [
                {
                    left: 'center',
                    text: '近7日主题热词'
                },
            ],
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '70%'],
                    // adjust the start angle
                    startAngle: 180,
                    label: {
                        show: true,
                        formatter(param) {
                            // correct the percentage
                            return param.name + ' (' + param.percent * 2 + '%)';
                        }
                    },
                    data: {{ recent_7_5_hot_title | tojson | safe }}
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
        {# 热词图end #}
    })
</script>

</body>
</html>